import React, { Fragment } from 'react';
import { Group } from '@vx/group';

import ServiceNode from './ServiceNode';
import { getTopLeft } from './utils';

function Nodes({
  nodes,
  layout,
  orientation,
  onNodeClick,
  rootKey = 'index',
  nodeKey = 'name',
  ...restProps
}) {
  return (
    <Fragment>
      {nodes.map((node, i) => (
        <Group {...getTopLeft(node, layout, orientation)} key={i}>
          <ServiceNode
            node={node}
            index={i}
            rootKey={rootKey}
            nodeKey={nodeKey}
            layout={layout}
            orientation={orientation}
            onClick={() => onNodeClick(node)}
            {...restProps}
          />
        </Group>
      ))}
    </Fragment>
  );
}

export default Nodes;
